<template>
  <base-modal size="mini" :unique="unique" :top="top" :title="$t('task.taskTypes.planTask.changeTime')" :show.sync="visible" width="500px" class="task-plantask-time-dialog">
    <div class="base-modal-content plantime-dialog-content">
      <form-item :label="$t('task.taskTypes.planTask.estimatedCreationTime')">
        <el-date-picker
          :id="`form_plantask_create_time`"
          type="datetime"
          :prefix-icon="`iconfont icon-fdn-datetime`"
          :picker-options="planTimeDatePickeroptions"
          :value-format="format"
          :placeholder="$t('common.placeholder.select')"
          v-model="planTime" 
          :clearable="clearable" 
          @input="choose"
        />
      </form-item>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" @click="submit" :disabled="pending">{{$t('common.base.makeSure')}}</el-button>
    </div>
  </base-modal>
</template>

<script>
/* api */
import * as TaskApi from '@src/api/TaskApi.ts';

/* util */
import { getTimestamp } from 'pub-bbx-utils'
import { safeNewDate } from '@src/util/time';
import i18n from '@src/locales';

export default {
  name: 'task-create-time-dialog',
  props: {
    task: {
      type: Object,
      default: () => ({})
    },
    field: {
      type: Object,
      default: () => ({})
    },
    top: {
      type: Boolean,
      default: false
    },
    unique: {
      type: Boolean,
      default: true
    },
    clearable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    const now = new Date()
    return {
      value: '',
      visible: false,
      pending: false,
      action: '',
      planTime: '',
      planTimeDatePickeroptions: {
        disabledDate(time) {
          return time < now
        }
      },

      taskId: '',
      planId: ''
    }
  },
  computed: {
    dateType() {
      return this.field?.setting?.dateType
    },
    format() {
      return 'timestamp'
    },
  },
  methods: {
    choose(value) {
      console.log(value);
    },
    dateTimePickerFocusHandler() {

    },
    dateTimePickerBlurHandler() {

    },
    /**
    * @description 更新计划时间
    */
    update({ field, newValue, oldValue }) {
      this.$set(this, 'planTime', newValue);
    },
    /**
    * @description 打开计划时间弹窗
    */
    openDialog(row) {
      this.taskId = row.planTaskId
      this.planId = row.planId
      this.planTime = ''
      this.visible = true
    },
    submit() {
      // 时间校验参考
      if (!this.planTime) return this.$platform.alert(i18n.t('task.tip.pleaseFillInSth', {content: this.field.displayName}));

      // 校验时间是否早于当前时间
      let planTime = getTimestamp(this.planTime);
      if (this.dateType == 'dateTime') {
        let nowTime = safeNewDate().getTime();
        if (planTime < nowTime) return this.$platform.alert(i18n.t('task.tip.planTimeTip3', {data: this.field.displayName}));
      }
      
      let params = { 
        taskId: this.taskId,
        planId: this.planId,
        expectCreateTime: this.planTime
      }
      
      if (this.pending) return;
      this.pending = true;
      
      TaskApi.updatePlanTaskTaskTime(params)
        .then(res => {
          if (res.success) {
            this.$platform.notification({
              title: this.$t('common.base.tip.editSuccess'),
              type: 'success'
            })
            this.visible = false
            this.$emit('submit')
          } else {
            this.$platform.notification({
              title: res.message,
              type: 'error'
            });
          }
        })
        .catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.pending = false
        })
    }
  }
}
</script>

<style lang="scss" scope>
.task-plantask-time-dialog {
  .form-item {
    margin-bottom: 6px;
    
    & > label {
      width: auto !important;
      padding-left: 0;
      margin-right: 20px;
    }
  }
  
  .task-planTime-notice {
    margin-bottom: 0;
  }
}
.plantime-dialog-content {
  padding: 0 !important;
}
</style>
